<!--  -->
<template>
  <div class="container-water-fall">
    <waterfall
      :col="col"
      :data="viodeDate"
      @scroll="scroll"
      @finish="finish"
      :height="'100vh'"
    >
      <template>
        <div class="cell-item" v-for="(item, index) in viodeDate" :key="index">
          <van-icon
            name="play-circle"
            class="icon-paly"
            size="30"
            color="#efefec"
          />
          <!-- <div class="PictureId">
            <span></span>
          </div>   -->
          <img
            :src="item.originItemImage"
            alt="加载错误"
            @click="handleClick(item.itemId, item.actorId, item.videoUrl)"
          />
          <div class="item-body">
            <div class="item-desc">{{ item.title }}</div>
            <div class="item-footer">
              <div class="item-footer-left">
                <div>{{ item.discountPrice }}</div>
                <span><img :src="item.bottomIcon" alt="" /></span>
              </div>
              <div class="name">{{ item.sale }}</div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
  </div>
</template>


<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      viodeDate: [],
      col: 2,
    }
  },
  //监听属性 类似于data概念
  computed: {
    itemWidth () {
      return 138 * 0.5 * (document.documentElement.clientWidth / 375) //rem布局 计算宽度
    },
    gutterWidth () {
      return 9 * 0.5 * (document.documentElement.clientWidth / 375) //rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    list () {
      this.$axios.get("/video/item?page=10",).then((res) => {
        this.viodeDate = res.data.list
      })
    },
    scroll (scrollData) {
      // console.log(scrollData);
    },
    switchCol (col) {
      this.col = col
      // console.log(this.col);
    },
    finish () { },
    handleClick (itemId, actorId, videoUrl) {
      // console.log(itemId, actorId, videoUrl)
      // let item = itemId
      // this.$router.push({ path: '/productdetails/' + "itemId=" + itemId + "&actorId=" + actorId })
      this.$router.push({
        name: "videoproductdetails",
        params: { itemId: itemId, actorId: actorId, videoUrl: videoUrl },
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.list()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.container-water-fall {
  padding-bottom: 100px;
  .cell-item {
    width: 100%;
    margin-bottom: 10px;
    background: #ffffff;
    border: 2px solid #f0f0f0;
    border-radius: 12px 12px 12px 12px;
    // overflow: hidden;
    box-sizing: border-box;
    position: relative;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
    .icon-paly {
      position: absolute;
      z-index: 66;
      right: 10px;
      top: 10px;
    }

    .item-body {
      margin: 5px 5px;
      .item-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .item-footer {
        display: flex;
        justify-content: space-between;
        margin: 5px 5px;

        .item-footer-left {
          display: flex;

          img {
            width: auto;
            height: 0.4rem;
            margin-left: 0.1rem;
          }
        }
      }
    }
  }
}
</style>
<style>
</style>